<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>iconfont Demo</title>
    <link
      rel="shortcut icon"
      href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"
      type="image/x-icon"
    />
    <link
      rel="icon"
      type="image/svg+xml"
      href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"
    />
    <link
      rel="stylesheet"
      href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"
    />
    <link rel="stylesheet" href="demo.css" />
    <link rel="stylesheet" href="iconfont.css" />
    <script src="iconfont.js"></script>
    <!-- jQuery -->
    <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
    <!-- 代码高亮 -->
    <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
    <style>
      .main .logo {
        margin-top: 0;
        height: auto;
      }

      .main .logo a {
        display: flex;
        align-items: center;
      }

      .main .logo .sub-title {
        margin-left: 0.5em;
        font-size: 22px;
        color: #fff;
        background: linear-gradient(-45deg, #3967ff, #b500fe);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <h1 class="logo">
        <a
          href="https://www.iconfont.cn/"
          title="iconfont 首页"
          target="_blank"
        >
          <img
            width="200"
            src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg"
          />
        </a>
      </h1>
      <div class="nav-tabs">
        <ul id="tabs" class="dib-box">
          <li class="dib active"><span>Unicode</span></li>
          <li class="dib"><span>Font class</span></li>
          <li class="dib"><span>Symbol</span></li>
        </ul>

        <a
          href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4030699"
          target="_blank"
          class="nav-more"
          >查看项目</a
        >
      </div>
      <div class="tab-container">
        <div class="content unicode" style="display: block">
          <ul class="icon_lists dib-box">
            <li class="dib">
              <span class="icon iconfont">&#xea3b;</span>
              <div class="name">乳腺-位置</div>
              <div class="code-name">&amp;#xea3b;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xea33;</span>
              <div class="name">6点</div>
              <div class="code-name">&amp;#xea33;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xea34;</span>
              <div class="name">7点</div>
              <div class="code-name">&amp;#xea34;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xea39;</span>
              <div class="name">12点</div>
              <div class="code-name">&amp;#xea39;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xea38;</span>
              <div class="name">11点</div>
              <div class="code-name">&amp;#xea38;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xea37;</span>
              <div class="name">10点</div>
              <div class="code-name">&amp;#xea37;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xea36;</span>
              <div class="name">9点</div>
              <div class="code-name">&amp;#xea36;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xea35;</span>
              <div class="name">8点</div>
              <div class="code-name">&amp;#xea35;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xea32;</span>
              <div class="name">5点</div>
              <div class="code-name">&amp;#xea32;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xea31;</span>
              <div class="name">4点</div>
              <div class="code-name">&amp;#xea31;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xea30;</span>
              <div class="name">3点</div>
              <div class="code-name">&amp;#xea30;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xea2f;</span>
              <div class="name">2点</div>
              <div class="code-name">&amp;#xea2f;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xea2e;</span>
              <div class="name">1点</div>
              <div class="code-name">&amp;#xea2e;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe9f6;</span>
              <div class="name">上传中</div>
              <div class="code-name">&amp;#xe9f6;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe9f5;</span>
              <div class="name">上传</div>
              <div class="code-name">&amp;#xe9f5;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe9ef;</span>
              <div class="name">关闭</div>
              <div class="code-name">&amp;#xe9ef;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe9f4;</span>
              <div class="name">图片</div>
              <div class="code-name">&amp;#xe9f4;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe9f3;</span>
              <div class="name">下一张</div>
              <div class="code-name">&amp;#xe9f3;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe9f2;</span>
              <div class="name">上一张</div>
              <div class="code-name">&amp;#xe9f2;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe9f1;</span>
              <div class="name">上传文件</div>
              <div class="code-name">&amp;#xe9f1;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe9f0;</span>
              <div class="name">列表</div>
              <div class="code-name">&amp;#xe9f0;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe9ee;</span>
              <div class="name">多图</div>
              <div class="code-name">&amp;#xe9ee;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe9ed;</span>
              <div class="name">等待</div>
              <div class="code-name">&amp;#xe9ed;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe9ec;</span>
              <div class="name">错误</div>
              <div class="code-name">&amp;#xe9ec;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe9eb;</span>
              <div class="name">超影工作站</div>
              <div class="code-name">&amp;#xe9eb;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe698;</span>
              <div class="name">复选框</div>
              <div class="code-name">&amp;#xe698;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe9a6;</span>
              <div class="name">删除</div>
              <div class="code-name">&amp;#xe9a6;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe9a5;</span>
              <div class="name">算法刷新</div>
              <div class="code-name">&amp;#xe9a5;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe9a4;</span>
              <div class="name">展开</div>
              <div class="code-name">&amp;#xe9a4;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe9a3;</span>
              <div class="name">收起</div>
              <div class="code-name">&amp;#xe9a3;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe9a2;</span>
              <div class="name">报告</div>
              <div class="code-name">&amp;#xe9a2;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe9a1;</span>
              <div class="name">重置</div>
              <div class="code-name">&amp;#xe9a1;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe9a0;</span>
              <div class="name">退出</div>
              <div class="code-name">&amp;#xe9a0;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe9ac;</span>
              <div class="name">跳转</div>
              <div class="code-name">&amp;#xe9ac;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe9ab;</span>
              <div class="name">放大</div>
              <div class="code-name">&amp;#xe9ab;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe9aa;</span>
              <div class="name">缩小</div>
              <div class="code-name">&amp;#xe9aa;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe9a9;</span>
              <div class="name">复制</div>
              <div class="code-name">&amp;#xe9a9;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe9a8;</span>
              <div class="name">复制文本</div>
              <div class="code-name">&amp;#xe9a8;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe9a7;</span>
              <div class="name">排序</div>
              <div class="code-name">&amp;#xe9a7;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe840;</span>
              <div class="name">成功</div>
              <div class="code-name">&amp;#xe840;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe920;</span>
              <div class="name">复选框</div>
              <div class="code-name">&amp;#xe920;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe914;</span>
              <div class="name">个人</div>
              <div class="code-name">&amp;#xe914;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe915;</span>
              <div class="name">工作站</div>
              <div class="code-name">&amp;#xe915;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe916;</span>
              <div class="name">关闭</div>
              <div class="code-name">&amp;#xe916;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe918;</span>
              <div class="name">日期</div>
              <div class="code-name">&amp;#xe918;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe919;</span>
              <div class="name">设置</div>
              <div class="code-name">&amp;#xe919;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe91a;</span>
              <div class="name">收起</div>
              <div class="code-name">&amp;#xe91a;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe91b;</span>
              <div class="name">展开</div>
              <div class="code-name">&amp;#xe91b;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe91c;</span>
              <div class="name">搜索</div>
              <div class="code-name">&amp;#xe91c;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe91d;</span>
              <div class="name">统计</div>
              <div class="code-name">&amp;#xe91d;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe91e;</span>
              <div class="name">账号</div>
              <div class="code-name">&amp;#xe91e;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe91f;</span>
              <div class="name">密码</div>
              <div class="code-name">&amp;#xe91f;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe911;</span>
              <div class="name">单选框</div>
              <div class="code-name">&amp;#xe911;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe912;</span>
              <div class="name">单选选中</div>
              <div class="code-name">&amp;#xe912;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe910;</span>
              <div class="name">复选选中</div>
              <div class="code-name">&amp;#xe910;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe90f;</span>
              <div class="name">导出</div>
              <div class="code-name">&amp;#xe90f;</div>
            </li>
          </ul>
          <div class="article markdown">
            <h2 id="unicode-">Unicode 引用</h2>
            <hr />

            <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
            <ul>
              <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
              <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
            </ul>
            <blockquote>
              <p>
                注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol
                引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）
              </p>
            </blockquote>
            <p>Unicode 使用步骤如下：</p>
            <h3 id="-font-face">
              第一步：拷贝项目下面生成的 <code>@font-face</code>
            </h3>
            <pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1703672181117') format('woff2'),
       url('iconfont.woff?t=1703672181117') format('woff'),
       url('iconfont.ttf?t=1703672181117') format('truetype');
}
</code></pre>
            <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
            <pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
            <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
            <pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
            <blockquote>
              <p>
                "iconfont" 是你项目下的
                font-family。可以通过编辑项目查看，默认是 "iconfont"。
              </p>
            </blockquote>
          </div>
        </div>
        <div class="content font-class">
          <ul class="icon_lists dib-box">
            <li class="dib">
              <span class="icon iconfont icon-ruxian-weizhi"></span>
              <div class="name">乳腺-位置</div>
              <div class="code-name">.icon-ruxian-weizhi</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-6dian"></span>
              <div class="name">6点</div>
              <div class="code-name">.icon-a-6dian</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-7dian"></span>
              <div class="name">7点</div>
              <div class="code-name">.icon-a-7dian</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-12dian"></span>
              <div class="name">12点</div>
              <div class="code-name">.icon-a-12dian</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-11dian"></span>
              <div class="name">11点</div>
              <div class="code-name">.icon-a-11dian</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-10dian"></span>
              <div class="name">10点</div>
              <div class="code-name">.icon-a-10dian</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-9dian"></span>
              <div class="name">9点</div>
              <div class="code-name">.icon-a-9dian</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-8dian"></span>
              <div class="name">8点</div>
              <div class="code-name">.icon-a-8dian</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-5dian"></span>
              <div class="name">5点</div>
              <div class="code-name">.icon-a-5dian</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-4dian"></span>
              <div class="name">4点</div>
              <div class="code-name">.icon-a-4dian</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-3dian"></span>
              <div class="name">3点</div>
              <div class="code-name">.icon-a-3dian</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-2dian"></span>
              <div class="name">2点</div>
              <div class="code-name">.icon-a-2dian</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-1dian"></span>
              <div class="name">1点</div>
              <div class="code-name">.icon-a-1dian</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shangchuanzhong"></span>
              <div class="name">上传中</div>
              <div class="code-name">.icon-shangchuanzhong</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shangchuan"></span>
              <div class="name">上传</div>
              <div class="code-name">.icon-shangchuan</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-guanbi1"></span>
              <div class="name">关闭</div>
              <div class="code-name">.icon-guanbi1</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-tupian"></span>
              <div class="name">图片</div>
              <div class="code-name">.icon-tupian</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-xiayizhang"></span>
              <div class="name">下一张</div>
              <div class="code-name">.icon-xiayizhang</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shangyizhang"></span>
              <div class="name">上一张</div>
              <div class="code-name">.icon-shangyizhang</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shangchuanwenjian"></span>
              <div class="name">上传文件</div>
              <div class="code-name">.icon-shangchuanwenjian</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-liebiao"></span>
              <div class="name">列表</div>
              <div class="code-name">.icon-liebiao</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-duotu"></span>
              <div class="name">多图</div>
              <div class="code-name">.icon-duotu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-dengdai"></span>
              <div class="name">等待</div>
              <div class="code-name">.icon-dengdai</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-cuowu"></span>
              <div class="name">错误</div>
              <div class="code-name">.icon-cuowu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-chaoyinggongzuozhan"></span>
              <div class="name">超影工作站</div>
              <div class="code-name">.icon-chaoyinggongzuozhan</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-fuxuankuang1"></span>
              <div class="name">复选框</div>
              <div class="code-name">.icon-fuxuankuang1</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shanchu"></span>
              <div class="name">删除</div>
              <div class="code-name">.icon-shanchu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-suanfashuaxin"></span>
              <div class="name">算法刷新</div>
              <div class="code-name">.icon-suanfashuaxin</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-zhankai1"></span>
              <div class="name">展开</div>
              <div class="code-name">.icon-zhankai1</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shouqi1"></span>
              <div class="name">收起</div>
              <div class="code-name">.icon-shouqi1</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-baogao"></span>
              <div class="name">报告</div>
              <div class="code-name">.icon-baogao</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-zhongzhi"></span>
              <div class="name">重置</div>
              <div class="code-name">.icon-zhongzhi</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-tuichu"></span>
              <div class="name">退出</div>
              <div class="code-name">.icon-tuichu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-tiaozhuan"></span>
              <div class="name">跳转</div>
              <div class="code-name">.icon-tiaozhuan</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-fangda"></span>
              <div class="name">放大</div>
              <div class="code-name">.icon-fangda</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-suoxiao"></span>
              <div class="name">缩小</div>
              <div class="code-name">.icon-suoxiao</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-fuzhi"></span>
              <div class="name">复制</div>
              <div class="code-name">.icon-fuzhi</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-fuzhiwenben"></span>
              <div class="name">复制文本</div>
              <div class="code-name">.icon-fuzhiwenben</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-paixu"></span>
              <div class="name">排序</div>
              <div class="code-name">.icon-paixu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-chenggong"></span>
              <div class="name">成功</div>
              <div class="code-name">.icon-chenggong</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-fuxuankuang"></span>
              <div class="name">复选框</div>
              <div class="code-name">.icon-fuxuankuang</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-geren"></span>
              <div class="name">个人</div>
              <div class="code-name">.icon-geren</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-gongzuozhan"></span>
              <div class="name">工作站</div>
              <div class="code-name">.icon-gongzuozhan</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-guanbi"></span>
              <div class="name">关闭</div>
              <div class="code-name">.icon-guanbi</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-riqi"></span>
              <div class="name">日期</div>
              <div class="code-name">.icon-riqi</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shezhi"></span>
              <div class="name">设置</div>
              <div class="code-name">.icon-shezhi</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shouqi"></span>
              <div class="name">收起</div>
              <div class="code-name">.icon-shouqi</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-zhankai"></span>
              <div class="name">展开</div>
              <div class="code-name">.icon-zhankai</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-sousuo"></span>
              <div class="name">搜索</div>
              <div class="code-name">.icon-sousuo</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-tongji"></span>
              <div class="name">统计</div>
              <div class="code-name">.icon-tongji</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-zhanghao"></span>
              <div class="name">账号</div>
              <div class="code-name">.icon-zhanghao</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-mima"></span>
              <div class="name">密码</div>
              <div class="code-name">.icon-mima</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-danxuankuang"></span>
              <div class="name">单选框</div>
              <div class="code-name">.icon-danxuankuang</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-danxuanxuanzhong"></span>
              <div class="name">单选选中</div>
              <div class="code-name">.icon-danxuanxuanzhong</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-fuxuanxuanzhong"></span>
              <div class="name">复选选中</div>
              <div class="code-name">.icon-fuxuanxuanzhong</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-daochu"></span>
              <div class="name">导出</div>
              <div class="code-name">.icon-daochu</div>
            </li>
          </ul>
          <div class="article markdown">
            <h2 id="font-class-">font-class 引用</h2>
            <hr />

            <p>
              font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode
              书写不直观，语意不明确的问题。
            </p>
            <p>与 Unicode 使用方式相比，具有如下特点：</p>
            <ul>
              <li>
                相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon
                是什么。
              </li>
              <li>
                因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class
                里面的 Unicode 引用。
              </li>
            </ul>
            <p>使用步骤如下：</p>
            <h3 id="-fontclass-">
              第一步：引入项目下面生成的 fontclass 代码：
            </h3>
            <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
            <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
            <pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
            <blockquote>
              <p>
                " iconfont" 是你项目下的
                font-family。可以通过编辑项目查看，默认是 "iconfont"。
              </p>
            </blockquote>
          </div>
        </div>
        <div class="content symbol">
          <ul class="icon_lists dib-box">
            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-ruxian-weizhi"></use>
              </svg>
              <div class="name">乳腺-位置</div>
              <div class="code-name">#icon-ruxian-weizhi</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-6dian"></use>
              </svg>
              <div class="name">6点</div>
              <div class="code-name">#icon-a-6dian</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-7dian"></use>
              </svg>
              <div class="name">7点</div>
              <div class="code-name">#icon-a-7dian</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-12dian"></use>
              </svg>
              <div class="name">12点</div>
              <div class="code-name">#icon-a-12dian</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-11dian"></use>
              </svg>
              <div class="name">11点</div>
              <div class="code-name">#icon-a-11dian</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-10dian"></use>
              </svg>
              <div class="name">10点</div>
              <div class="code-name">#icon-a-10dian</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-9dian"></use>
              </svg>
              <div class="name">9点</div>
              <div class="code-name">#icon-a-9dian</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-8dian"></use>
              </svg>
              <div class="name">8点</div>
              <div class="code-name">#icon-a-8dian</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-5dian"></use>
              </svg>
              <div class="name">5点</div>
              <div class="code-name">#icon-a-5dian</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-4dian"></use>
              </svg>
              <div class="name">4点</div>
              <div class="code-name">#icon-a-4dian</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-3dian"></use>
              </svg>
              <div class="name">3点</div>
              <div class="code-name">#icon-a-3dian</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-2dian"></use>
              </svg>
              <div class="name">2点</div>
              <div class="code-name">#icon-a-2dian</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-1dian"></use>
              </svg>
              <div class="name">1点</div>
              <div class="code-name">#icon-a-1dian</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shangchuanzhong"></use>
              </svg>
              <div class="name">上传中</div>
              <div class="code-name">#icon-shangchuanzhong</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shangchuan"></use>
              </svg>
              <div class="name">上传</div>
              <div class="code-name">#icon-shangchuan</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-guanbi1"></use>
              </svg>
              <div class="name">关闭</div>
              <div class="code-name">#icon-guanbi1</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-tupian"></use>
              </svg>
              <div class="name">图片</div>
              <div class="code-name">#icon-tupian</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-xiayizhang"></use>
              </svg>
              <div class="name">下一张</div>
              <div class="code-name">#icon-xiayizhang</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shangyizhang"></use>
              </svg>
              <div class="name">上一张</div>
              <div class="code-name">#icon-shangyizhang</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shangchuanwenjian"></use>
              </svg>
              <div class="name">上传文件</div>
              <div class="code-name">#icon-shangchuanwenjian</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-liebiao"></use>
              </svg>
              <div class="name">列表</div>
              <div class="code-name">#icon-liebiao</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-duotu"></use>
              </svg>
              <div class="name">多图</div>
              <div class="code-name">#icon-duotu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-dengdai"></use>
              </svg>
              <div class="name">等待</div>
              <div class="code-name">#icon-dengdai</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-cuowu"></use>
              </svg>
              <div class="name">错误</div>
              <div class="code-name">#icon-cuowu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-chaoyinggongzuozhan"></use>
              </svg>
              <div class="name">超影工作站</div>
              <div class="code-name">#icon-chaoyinggongzuozhan</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-fuxuankuang1"></use>
              </svg>
              <div class="name">复选框</div>
              <div class="code-name">#icon-fuxuankuang1</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shanchu"></use>
              </svg>
              <div class="name">删除</div>
              <div class="code-name">#icon-shanchu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-suanfashuaxin"></use>
              </svg>
              <div class="name">算法刷新</div>
              <div class="code-name">#icon-suanfashuaxin</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-zhankai1"></use>
              </svg>
              <div class="name">展开</div>
              <div class="code-name">#icon-zhankai1</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shouqi1"></use>
              </svg>
              <div class="name">收起</div>
              <div class="code-name">#icon-shouqi1</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-baogao"></use>
              </svg>
              <div class="name">报告</div>
              <div class="code-name">#icon-baogao</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-zhongzhi"></use>
              </svg>
              <div class="name">重置</div>
              <div class="code-name">#icon-zhongzhi</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-tuichu"></use>
              </svg>
              <div class="name">退出</div>
              <div class="code-name">#icon-tuichu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-tiaozhuan"></use>
              </svg>
              <div class="name">跳转</div>
              <div class="code-name">#icon-tiaozhuan</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-fangda"></use>
              </svg>
              <div class="name">放大</div>
              <div class="code-name">#icon-fangda</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-suoxiao"></use>
              </svg>
              <div class="name">缩小</div>
              <div class="code-name">#icon-suoxiao</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-fuzhi"></use>
              </svg>
              <div class="name">复制</div>
              <div class="code-name">#icon-fuzhi</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-fuzhiwenben"></use>
              </svg>
              <div class="name">复制文本</div>
              <div class="code-name">#icon-fuzhiwenben</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-paixu"></use>
              </svg>
              <div class="name">排序</div>
              <div class="code-name">#icon-paixu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-chenggong"></use>
              </svg>
              <div class="name">成功</div>
              <div class="code-name">#icon-chenggong</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-fuxuankuang"></use>
              </svg>
              <div class="name">复选框</div>
              <div class="code-name">#icon-fuxuankuang</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-geren"></use>
              </svg>
              <div class="name">个人</div>
              <div class="code-name">#icon-geren</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-gongzuozhan"></use>
              </svg>
              <div class="name">工作站</div>
              <div class="code-name">#icon-gongzuozhan</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-guanbi"></use>
              </svg>
              <div class="name">关闭</div>
              <div class="code-name">#icon-guanbi</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-riqi"></use>
              </svg>
              <div class="name">日期</div>
              <div class="code-name">#icon-riqi</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shezhi"></use>
              </svg>
              <div class="name">设置</div>
              <div class="code-name">#icon-shezhi</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shouqi"></use>
              </svg>
              <div class="name">收起</div>
              <div class="code-name">#icon-shouqi</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-zhankai"></use>
              </svg>
              <div class="name">展开</div>
              <div class="code-name">#icon-zhankai</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-sousuo"></use>
              </svg>
              <div class="name">搜索</div>
              <div class="code-name">#icon-sousuo</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-tongji"></use>
              </svg>
              <div class="name">统计</div>
              <div class="code-name">#icon-tongji</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-zhanghao"></use>
              </svg>
              <div class="name">账号</div>
              <div class="code-name">#icon-zhanghao</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-mima"></use>
              </svg>
              <div class="name">密码</div>
              <div class="code-name">#icon-mima</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-danxuankuang"></use>
              </svg>
              <div class="name">单选框</div>
              <div class="code-name">#icon-danxuankuang</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-danxuanxuanzhong"></use>
              </svg>
              <div class="name">单选选中</div>
              <div class="code-name">#icon-danxuanxuanzhong</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-fuxuanxuanzhong"></use>
              </svg>
              <div class="name">复选选中</div>
              <div class="code-name">#icon-fuxuanxuanzhong</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-daochu"></use>
              </svg>
              <div class="name">导出</div>
              <div class="code-name">#icon-daochu</div>
            </li>
          </ul>
          <div class="article markdown">
            <h2 id="symbol-">Symbol 引用</h2>
            <hr />

            <p>
              这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a
                href=""
                >文章</a
              >
              这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
            </p>
            <ul>
              <li>支持多色图标了，不再受单色限制。</li>
              <li>
                通过一些技巧，支持像字体那样，通过 <code>font-size</code>,
                <code>color</code> 来调整样式。
              </li>
              <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
              <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
            </ul>
            <p>使用步骤如下：</p>
            <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
            <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
            <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
            <pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
            <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
            <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
        </div>
      </div>
    </div>
    <script>
      $(document).ready(function () {
        $('.tab-container .content:first').show();

        $('#tabs li').click(function (e) {
          var tabContent = $('.tab-container .content');
          var index = $(this).index();

          if ($(this).hasClass('active')) {
            return;
          } else {
            $('#tabs li').removeClass('active');
            $(this).addClass('active');

            tabContent.hide().eq(index).fadeIn();
          }
        });
      });
    </script>
  </body>
</html>
